<template>
  <div>
    <!--触底加载更多-列表组件
        v-model:是否处吁加载更多状态(loading为true,则触底不会再额外触发load事件)
        finished:如果设置为true就证明没有更多数据了（列表加载全都完毕了）
        finished-text:加载完成底部提示文字
        load事件：组件内部源码检测到滚动到底部后，会$emit触发1oad事件，执行你编写的onLoad事
        件函数，加载更多数据，把列表撑高
    -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      :immediate-check='false'
      @load="onLoad"
    >
      <!-- :obj='obj' 给子组件articleItem 传递每一个文章需要的数据obj -->
      <article-item
        v-for="obj in articleList"
        :key="obj.art_id"
        :obj="obj"
        @click.native="$router.push(`/article_detail?art_id=${obj.art_id}`)"
      ></article-item>
    </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
// 引入单元格组件
import ArticleItem from '@/components/ArticleItem.vue'
import { getArticleListAPI } from '@/api/index.js'
export default {
  name: 'ArticleList',
  // 接收父组件index.vue传递过来的频道id
  props: {
    cid: Number // 默认是number类型
  },
  components: {
    // 注册组件
    ArticleItem
  },
  data () {
    return {
      // 文章的所有数据
      articleList: [],
      loading: false,
      finished: false,
      nextTime: new Date().getTime(),
      refreshing: false
    }
  },
  created () {
    this.getArticleListFn()
  },
  methods: {
    async getArticleListFn () {
      const res = await getArticleListAPI({
        channel_id: this.cid,
        timestamp: this.nextTime
      })
      console.log(res)
      // this.articleList = res.data.data.results
      this.articleList = [...this.articleList, ...res.data.data.results]// 把旧的数据在前，新的数据在后，拼接一个全新的数组，铺设列表
      this.nextTime = res.data.data.pre_timestamp // 拿到pre_timestapme,为请求下一页做准备
      this.loading = false // 加载中转圈（停下了），新的数据已经加载列表已经撑开，设置为false,为下载触底加载做准备
      if (res.data.data.pre_timestamp === null) { // 说明没有可以加载的数据了
        this.finished = true // 告诉list组件再次触底不需要再执行onload事件了
      }
      this.refreshing = false // 关闭下拉加载转圈
    },
    // 加载更多（比较难）
    // 1.先准备van-1ist组件，并包裹自已列表，实现2个属性，1个方法
    // 2.要更多数据，看接口文档，要timestamp,.所以准备nextTime?变量，每次都保存新的一段数据最后一条文章的时间戳
    // 3.:onLoad中，发新的请求带新的nextTime,数据回来后，拼接数组
    // 4.1ist组件本次加载更多后，把loading改回成true,为下次触底加载load事件做准备
    // 5.看好加载完成的条件，把finished改成ture,不让1ist再触发onload了
    onLoad () {
      // 异步更新数据
      // this.getArticleListFn()

      // 判断articleList中是否有数据，如果有数据再执行onload事件
      if (this.articleList.length > 0) {
        this.getArticleListFn()
      }
    },
    // 下拉刷新会触发的事件
    onRefresh () {
      this.articleList = []// 清空文章列表
      this.nextTime = new Date().getTime() // 传入最新的时间戳
      this.getArticleListFn()// 重新获取最新的文章列表
    }
  }
}
</script>

<style></style>
